<template>
  <div class="pad" v-if="detail">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <div class="blue-title">文章详情</div>
    <div class="item-label">文章封面:</div>
    <img class="a-banner" :src="detail.knowledgePic" />
    <div class="info-wrap">
      <div>
        <span class="item-label">文章标题:</span>
        <span>{{labels[0].title}}</span>
      </div>
      <div style="display: flex;">
        <span class="item-label">关键词:</span>
        <div>
          <div
            v-for="(item, index) in labels"
            :key="index"
            class="label-i"
          >
            <span>{{item.keyword}}</span>
            <span>{{item.title}}</span>
          </div>
        </div>
      </div>
      <div>
        <span class="item-label">关联产品</span>
      </div>
      <!-- <div>
        <span class="item-label">关联产品:</span>
        <span>健康尺：通过摄影作品学习建筑空间语言</span>
      </div>
      <div>
        <span class="item-label">适用性别:</span>
        <span>男</span>
      </div>
      <div>
        <span class="item-label">适用年龄:</span>
        <span>女</span>
      </div> -->
    </div>
    <div style="margin-top: 40px;" class="item-label">文章内容:</div>
    <div
      class="article-content"
      style="background-color: #f8f8f8;"
      v-html="detail.knowledgeDesc"
    >
    </div>
  </div>
</template>
<script>
import {
  getArticleInfo
} from '../api/version2'
export default {
  name: 'ArticleDetail',
  props: ['id'],
  data () {
    return {
      title: ' ',
      labels: [ ],
      detail: null
    }
  },
  methods: {
    goBack () {
      history.back()
    },
    fetchArticleInfo () {
      getArticleInfo(this.id)
      .then(res => {
        console.log(res);
        let obj = res.data.data || {};
        this.detail = obj;
        this.labels = obj.keywordTitleList.map((item, index) => {
          return {
            keyword: item,
            title: obj.knowledgeNameList[index]
          }
        })
      })
      .catch(e => {

      })
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.fetchArticleInfo()

  }
}
</script>
<style lang="scss" scoped>

    *{
      margin: 0 auto;
    }

  .blue-title {
    display: inline-block;
    margin-bottom: 40px;
    padding: 10px 50px 10px 15px;
    background-color: #4AC493;
    border-radius: 0px 20px 20px 0px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
  }
  .item-label {
    padding-right: 20px;
    font-size: 14px;
    color: #666666;
  }
  .a-banner {
    display: block;
    margin-top: 20px;
    width: 244px;
    border-radius: 8px;
    background-attachment: #f8f8f8;
    height: 200px;
    border: none;
  }
  .info-wrap {
    display: flex;
    margin-top: 6px;
    flex-wrap: wrap;
    & > div {
      margin-top: 40px;
      width: calc(100% / 3);
      & > span:nth-of-type(2) {
        font-size: 14px;
        color: #333333;
      }
    }
  }
  .label-i {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 0!important;
    &:last-child {
      margin-bottom: 0;
    }
    span:nth-of-type(1) {
      display: inline-block;
      margin-right: 20px;
      padding: 6px 9px;
      border-radius: 5px;
      border: 1px solid #4AC493;
      font-size: 14px;
      color: #4AC493;
    }
    span:nth-of-type(2) {
      font-size: 14px;
      color: #333333;
    }
  }
  .article-content {
    margin-top: 20px;
    white-space: break-spaces;
    padding: 10px;
    background-color: #f8f8f8;
    line-height: 20px;
  }
</style>
